<template>
    <el-card class="card f fv">
        <div class="f fac fpj">
            <div class="title">产品分类</div>
            <div class="operation">
                <el-button type="primary" @click="openDialog(null, '添加')">添加分类</el-button>
            </div>
        </div>

        <!-- 表格 -->
        <el-table :data="data.tableList" height="700" v-loading="data.tableLoading" stripe class="table">
            <el-table-column prop="id" align="center" label="ID" />
            <el-table-column prop="name" align="center" label="分类名称" />               
            <el-table-column prop="description" align="center" label="分类描述" />   
            <el-table-column align="center" label="操作">
                <template #default="scope">
                    <span class="table-edit" @click="openDialog(scope.row, '编辑')">编辑</span>
                    <span class="table-delete" @click="deleteCategory(scope.row)">删除</span>
                </template>
            </el-table-column>
        </el-table>

        <!-- 弹框 -->
        <el-dialog v-model="dialogData.dialogVisible" :close-on-click-modal="false" width="3.6rem"
            :title="dialogData.dialogTitle" @close="closeDialog">
            <el-form :model="dialogData.form" :rules="dialogData.formRules" hide-required-asterisk ref="refForm" label-postion="left" label-width="0.8rem">
                <el-form-item label="分类名称" prop="name">
                    <el-input clearable style="width: 2.2rem;" v-model="dialogData.form.name" placeholder="请输入分类名称" />
                </el-form-item>
                <el-form-item label="分类描述" prop="description">
                    <el-input type="textarea" resize="none" clearable style="width: 2.2rem;" v-model="dialogData.form.description" placeholder="请输入分类描述" />
                </el-form-item>                
            </el-form>
            <template #footer>
                <span>
                    <el-button @click="closeDialog">取消</el-button>
                    <el-button type="primary" @click="submit">确定</el-button>
                </span>
            </template>
        </el-dialog>

    </el-card>
</template>

<script setup>
import { ref, onMounted, reactive, watchEffect } from 'vue'
import http from '@/api/home'
import utils from '@/utils/utils'


const refForm = ref()

// 数据集
const data = reactive({
    // 搜索表单对象
    searchform: {},
    // 表格数据
    tableList: [],
    // 表格高度
    tableHeight: 0,
    // 表格加载
    tableLoading: false,
    // 分页 
    pageNum: 1,
    pageSize: 20,
    total: 0,
})

// 弹框
const dialogData = reactive({
    // 是否显示
    dialogVisible: false,
    // 标题
    dialogTitle: '',
    // 表单数据 
    form: {},
    // 校验规则
    formRules: {
        name: [{ required: true, message: '请输入分类名称', trigger: 'blur' }],
        description: [{ required: true, message: '请输入分类描述', trigger: 'blur' }],
    }
})

onMounted(() => {
    getList()
})

// 获取列表
const getList = () => {
    data.tableLoading = true
    http.categoryList().then(res => {
        data.tableLoading = false
        data.tableList = res.data
    }).finally(() => {
        data.tableLoading = false
    })
}

// 打开对话框
const openDialog = (row, title) => {
    dialogData.dialogVisible = true
    if (row) {
        dialogData.form = { ...row }
    } else {
        dialogData.form = {}
    }
    dialogData.dialogTitle = title
}

//提交
const submit = () => {
    refForm.value.validate((valid) => {
        if (valid) {
            if (dialogData.dialogTitle == '添加') {
                http.categoryAdd(dialogData.form).then(res => {
                    ElMessage({ type: 'success', message: res.message })
                    dialogData.dialogVisible = false
                    getList()
                })
            } else {
                http.categoryUpdate(dialogData.form).then(res => {
                    ElMessage({ type: 'success', message: res.message })
                    dialogData.dialogVisible = false
                    getList()
                })
            }
        }
    })
}

// 关闭对话框
const closeDialog = () => {
    dialogData.dialogVisible = false; 
    refForm.value.resetFields(); 
    dialogData.form = {}
}

// 删除
const deleteCategory = (data) => {
    ElMessageBox.confirm(
        '是否删除该分类?',
        '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    }
    ).then(() => {
        http.categoryrDelete({ id: data.id }).then(res => {
            ElMessage({ type: 'success', message: res.message })
            getList()
        })
    })
}

// 设置表格高度
const setTableHeight = () => {
    let tableH = 320 // 距离下方的距离 
    let tableHeightDetail = window.innerHeight - tableH
    if (tableHeightDetail <= 400) {
        data.tableHeight = 400
    } else {
        data.tableHeight = window.innerHeight - tableH 
    }
}
watchEffect(() => setTableHeight())

</script>

<style lang="scss" scoped>
.card {
    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
    margin-top: 0.14rem;
    height: calc(100vh - 0.68rem - 0.7rem);

    .title {
        font-size: 0.2rem;
        font-weight: bold;
        color: #000;
        padding-bottom: 0.1rem;
        border-bottom: 4px solid $ncpColor;
    }

    .role-input {
        width: 2rem;
        margin-right: 0.2rem;
    }

    .table {
        width: 100%;
        height: 100%;
        // margin: 0.1rem 0;
    }

    .table-edit {
        color: $otherColor;
        margin-right: 0.2rem;
        cursor: pointer;

        &:hover {
            text-decoration: underline;
        }
    }

    .disabled {
        pointer-events: none;
        opacity: 0.8;
    }

    .table-delete {
        color: $helpColor;
        cursor: pointer;

        &:hover {
            text-decoration: underline;
        }
    }

    :deep(.el-drawer__title) {
        font-size: 0.16rem;
    }

    .menu-tree {
        height: 100%;
        position: relative;

        .tree {
            height: calc(100% - 0.4rem);
            overflow-y: auto;
        }

        .footer {
            position: absolute;
            bottom: 0;
            left: 0;
        }
    }

}
</style>